<template>
  <div class="box">
    <div class="box-border">
      <span class="magnify"></span>
      <input
        type="text"
        name="sah"
        id="sah"
        placeholder="音乐/视频/电台/用户"
        class="txt"
        v-model="keyword"
        @keydown.enter="search"
        @focus="suggestFlag(true)"
        @blur="suggestFlag(false)"
      />
      <label for="sah" class="label">&nbsp;</label>
    </div>
    <SearchAdvice :keyword="keyword" :flag="flag"></SearchAdvice>
  </div>
</template>

<script>
import SearchAdvice from "@/encapsulation/searchAdvice/SearchAdvice.vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  name: "NavInput",
  components: { SearchAdvice },
  setup() {
    let keyword = ref("");
    let router = useRouter();

    let flag = ref(true);
    function search() {
      router.push({
        name: "search",
        query: {
          s: keyword.value,
        },
      });
    }
    function suggestFlag(v) {
      flag.value = v;
    }

    return {
      keyword,
      search,
      suggestFlag,
      flag,
    };
  },
};
</script>

<style scoped lang="less">
.box {
  float: right;
  position: relative;
  width: 158px;
  height: 70px;
  .txt {
    position: relative;
    top: 8px;
    left: 28px;
    width: 75%;
    background-color: #fff;
    font-size: 12px;
  }
  .label {
    position: absolute;
    top: 8px;
    left: 26px;
    width: 75%;
    &:hover {
      cursor: text;
    }
  }
  .box-border {
    position: relative;
    top: 19px;
    width: 100%;
    height: 32px;
    border-radius: 20px;
    background-color: #fff;

    .magnify {
      position: absolute;
      width: 24px;
      height: 32px;
      left: 0;
      background: url("../../../common/images/topbar.png") no-repeat 0 -99px;
    }
  }
}
.u-lstlay /deep/ {
  clear: both;
  top: 59px;
  width: 240px;
}
</style>
